<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <body>

        <ui:composition template="./pageTemplate.xhtml">
            <ui:define name="content">
                <h3>#{jsfmsgs.perYear_header}</h3>
                <p:separator />
                <div class="tablestyle">
                    <h:form id="tableform">
                        <p:contextMenu for="vulnsTable">
                            <p:menuitem value="#{jsfmsgs.perYear_context_detalle}" update=":tableform:vulnDetail" icon="ui-icon-search" oncomplete="PF('vulnDialog').show()" />
                        </p:contextMenu>
                        <p:dataTable id="vulnsTable" var="vuln" value="#{vulnerabilityBean.vulns}" 
                                     rowKey="#{vuln.name}"
                                     selection="#{vulnerabilityBean.selectedVuln}"
                                     selectionMode="single"
                                     rows="20" paginator="true"
                                     paginatorTemplate="#{jsfmsgs.perYear_table_paginator_template}"
                                     emptyMessage="#{jsfmsgs.perYear_table_empty_query}"
                                     filteredValue="#{vulnerabilityBean.filteredVulns}"
                                     rowsPerPageTemplate="20, 25, 30">
                            <p:column headerText="Name" sortBy="#{vuln.name}" filterBy="#{vuln.name}" filterMatchMode="contains">
                                <h:outputText value="#{vuln.name}" />
                            </p:column>
                            <p:column headerText="Score" sortBy="#{vuln.score}" filterBy="#{vuln.score}" filterMatchMode="contains">
                                <h:outputText value="#{vuln.score}" />
                            </p:column>
                        </p:dataTable>
                        <p:dialog header="#{jsfmsgs.perYear_vuln_dialog_header}" position="center" widgetVar="vulnDialog" modal="true" 
                                  showEffect="fade" hideEffect="fade" resizable="false"
                                  styleClass="customDialog">
                            <p:outputPanel id="vulnDetail">
                                <p:panelGrid columns="2" rendered="#{not empty vulnerabilityBean.selectedVuln}">
                                    <h:outputText value="Name: " />
                                    <h:outputText value="#{vulnerabilityBean.selectedVuln.name}" />
                                    <h:outputText value="Score" />
                                    <h:outputText value="#{vulnerabilityBean.selectedVuln.score}" />
                                </p:panelGrid>
                            </p:outputPanel>
                        </p:dialog>
                        <p:blockUI block="vulnsTable" trigger="vulnsTable" >
                            #{jsfmsgs.loadingMessage} <br />
                            <p:graphicImage library="images" name="loading.gif" style="width: 32px; height: 32px" />
                        </p:blockUI>
                    </h:form>
                </div>
            </ui:define>
        </ui:composition>

    </body>
</html>